<template>
  <div v-if="basicShow" class="right">
    <div class="showTitle">
      <el-icon><Tickets /></el-icon>
      <h2>基本信息</h2>
      <input type="button" @click="convertMsg($event)" value="修改" />
    </div>
    <table class="bigtable">
      <tr>
        <td class="title">
          <div>
            <el-icon><User /></el-icon>
            <h3>账户名</h3>
          </div>
        </td>
        <td class="input">
          <input type="text" v-model="this.userName" disabled />
        </td>
        <td class="title">
          <div>
            <el-icon><Avatar /></el-icon>
            <h3>用户名</h3>
          </div>
        </td>
        <td class="input">
          <input v-model="this.nickName" type="text" disabled />
        </td>
      </tr>
      <tr>
        <td class="title">
          <div>
            <el-icon><Clock /></el-icon>
            <h3>年龄</h3>
          </div>
        </td>
        <td class="input">
          <input type="text" disabled v-model="age" />
        </td>
        <td class="title">
          <div>
            <el-icon><UserFilled /></el-icon>
            <h3>性别</h3>
          </div>
        </td>
        <td>
          <select id="gender" disabled v-model="this.sex">
            <option value="">请选择</option>
            <option value="1">男</option>
            <option value="2">女</option>
          </select>
        </td>
      </tr>
      <tr>
        <td class="title">
          <div>
            <el-icon><Iphone /></el-icon>
            <h3>手机号</h3>
          </div>
        </td>
        <td class="input">
          <input v-model="this.phone" type="text" disabled />
        </td>
        <td class="title">
          <div>
            <el-icon><Location /></el-icon>
            <h3>地区</h3>
          </div>
        </td>
        <td class="input">
          <input v-model="this.area" type="text" disabled />
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
import {
  Tickets,
  PictureFilled,
  Avatar,
  UserFilled,
  Iphone,
  Location,
  Clock,
  User,
} from "@element-plus/icons-vue";
import { userInfo, convertInfo } from "@/api";
import { mapState, mapMutations } from "vuex";

/* import $ from 'jquery' */
export default {
  name: "BasicInfo",
  data() {
    return {
      basicShow: true,
      avatar: "https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png",
      age: "",
      userName: "",
      nickName: "",
      area: "",
      sex: "",
      phone: "",
    };
  },
  components: {
    User,
    Clock,
    Location,
    Tickets,
    PictureFilled,
    Avatar,
    UserFilled,
    Iphone,
  },
  computed: {
    ...mapState("LoginStore", ["tokenStore","login_name"]),
  },
  created() {
    if (localStorage.getItem("token")) {
      this.token = localStorage.getItem("token");
    }
    this.getInfo()
  },
  methods: {
    ...mapMutations("PerCent", ["convertMsgStore"]),
    ...mapMutations("LoginStore", ["setLoginName"]),
    getInfo(){
      userInfo().then((response) => {
      if (response.data.code === 200) {
        this.age = response.data.data.age;
        this.avatar = response.data.data.avatar;
        this.userName = response.data.data.userName;
        this.nickName = response.data.data.nickName;
        this.area = response.data.data.area;
        this.sex = response.data.data.sex;
        this.phone = response.data.data.phone;
        this.setLoginName(this.userName)
      } else {
        alert("服务器出错了，请重试!");
      }
    });
    },
    validate() {
      const phoneRegx =
        /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/;
      let errMsg = "";

      if (this.age < 18) {
        errMsg = "年龄不能小于18岁<br/>";
      }
      if (!phoneRegx.test(this.phone)) {
        errMsg += "手机号格式不正确<br/>";
      }
      if (errMsg != "") {
        alert(errMsg);
        return false;
      } else {
        return true;
      }
    },
    convertMsg(e) {
      //修改信息
      if (e.currentTarget.getAttribute("value") === "确认修改") {
        const params = {
          age: this.age,
          nickName: this.nickName,
          area: this.area,
          sex: this.sex,
          phone: this.phone,
        };
        if (this.validate()) {
          convertInfo(params).then((response) => {
            if (response.data.code === 200) {
              this.basicShow = false;
              alert("修改成功");
              this.setLoginName(this.nickName);
              this.getInfo()
              this.basicShow = true;
            } else {
              alert("修改失败");
            }
          });
        }
      } //退出修改信息
      else if (e.currentTarget.getAttribute("value") === "修改") {
        const n = document.documentElement
            .getElementsByTagName("table")[0]
          .getElementsByTagName("input").length;
        for (var i = 2; i < n; i++) {
          document.documentElement
            .getElementsByTagName("table")[0]
            .getElementsByTagName("input")[i]
            .removeAttribute("disabled");
        }
        document.documentElement
          .getElementsByTagName("select")[0]
          .removeAttribute("disabled");
        e.currentTarget.setAttribute("value", "确认修改");
      }
    },
  },
};
</script>
<style scoped>
.right {
  width: 59rem;
  background-color: rgb(255, 255, 255);
  top: 1rem;
  left: 24rem;
  border: 1px solid gray;
  border-radius: 10px;
  margin-left: 25rem;
}
.showTitle {
  position: relative;
  width: 100%;
  height: 3rem;
  border-bottom: 1px solid rgb(165, 162, 162);
  box-sizing: border-box;
  text-align: start;
  padding-left: 2rem;
}
.showTitle h2 {
  display: inline-block;
  font-size: 1.3rem;
  text-align: left;
}
table {
  width: 95%;
  margin: 0 auto;
  margin-top: 3rem;
  font-size: small;
  font-weight: bolder;
  border-collapse: separate; /* 控制是否合并边框 */
  border-spacing: 0; /* 控制单元格之间的距离 */
  border: solid 2px rgb(215, 215, 215); /*控制外边框*/
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 8rem;
}
td {
  text-align: left;
  padding: 0.5rem;
  border-top: 1px solid rgb(213, 213, 213);
}
td:last-child,
th:last-child {
  border-right-color: transparent;
}
.title {
  width: 4rem;
  background-color: rgb(245, 245, 245);
  padding-left: 1rem;
  margin: 0;
}
.headPortrait {
  height: 6rem;
}
td,
th {
  border-right: 2px solid rgb(213, 213, 213);
}

.el-icon {
  --color: inherit;
  height: 1em;
  width: 1em;
  line-height: 1em;
  fill: currentColor;
  color: var(--color);
  display: inline-block;
  font-size: 1.3rem;
  text-align: left;
  font-size: large;
}
table td h3 {
  display: inline-block;
  font-size: 1rem;
}
table td .el-icon[data-v-7641c14d] {
  --color: inherit;
  height: 1em;
  width: 1em;
  line-height: 1em;
  fill: currentColor;
  color: var(--color);
  font-size: 1.3rem;
  font-size: large;
  display: inline-block;
  position: absolute;
  top: 1.1rem;
  left: -0.2rem;
}
table td div {
  position: relative;
  text-align: justify;
  padding-left: 1rem;
}
input[type="button"] {
  background-color: #409eff;
  width: 6rem;
  height: 2rem;
  border-radius: 1rem;
  position: absolute;
  right: 2rem;
  border: none;
  top: 0.5rem;
  color: white;
  text-align: center;
  letter-spacing: 0.3rem;
  cursor: pointer;
}

/* 输入框的样式 */
input {
  display: inline-block;
  padding: 0;
  margin: 0;
  width: 90%;
  height: 2rem;
  border: none;
  /* outline: none; */
  color: rgb(63, 62, 62);
  font-size: 1rem;
  font-weight: bold;
}
.input {
  padding: 0;
  padding-left: 0.4rem;
}
table select {
  width: 5rem;
  font-size: 1rem;
  border: none;
}
table select:disabled {
  width: 5rem;
  font-size: 1rem;
  color: black;
  border: none;
  font-weight: bold;
}

/* 头像样式 */
.avatarParent {
  position: relative;
}
.avatar {
  width: 5rem;
  height: 5rem;
  overflow: hidden;
}
table input[type="file"] {
  display: none;
  position: absolute;
  top: -1.5rem;
  left: 8rem;
  /*   background-color: #409eff;
  border: none;
  color: white; */
}
table img {
  width: 100%;
  height: auto;
}
</style>
